import React from 'react';
import { Typography, Row, Col, Card } from 'antd';
import ReactECharts from 'echarts-for-react';
import './style.less';

const { Title, Paragraph } = Typography;

const EmploymentPage: React.FC = () => {
  // 行业分布图表配置
  const industryOption = {
    title: {
      text: '毕业生去向分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '去向分布',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 69, name: '就业' },
          { value: 15, name: '考研' },
          { value: 3, name: '教育' },
          { value: 10, name: '其他' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  // 薪资分布图表配置
  const salaryOption = {
    title: {
      text: '毕业生薪资分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: ['5k-10k', '10k-15k', '15k-20k', '20k以上']
    },
    yAxis: {
      type: 'value',
      name: '人数'
    },
    series: [
      {
        name: '人数',
        type: 'bar',
        data: [5, 12
          , 30, 25, 10]
      }
    ]
  };

  // 地域分布图表配置
  const locationOption = {
    title: {
      text: '毕业生地域分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '地域分布',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 35, name: '北京' },
          { value: 25, name: '上海' },
          { value: 15, name: '广州' },
          { value: 10, name: '深圳' },
          { value: 15, name: '其他' }
        ]
      }
    ]
  };

  return (
    <div className="employment-container">
      <div className="employment-intro">
        <Title level={2}>就业去向</Title>
        <Paragraph>
          我们的实验室毕业生就业情况良好，大部分进入了互联网知名企业。
          以下是近五年来实验室毕业生的就业数据统计，包括行业分布、薪资水平和地域分布等信息。
        </Paragraph>
      </div>

      <Row gutter={[24, 24]} className="charts-container">
        <Col xs={24} md={12}>
          <Card title="行业分布" className="chart-card">
            <ReactECharts option={industryOption} style={{ height: '300px' }} />
          </Card>
        </Col>
        <Col xs={24} md={12}>
          <Card title="地域分布" className="chart-card">
            <ReactECharts option={locationOption} style={{ height: '300px' }} />
          </Card>
        </Col>
        <Col xs={24}>
          <Card title="薪资分布" className="chart-card">
            <ReactECharts option={salaryOption} style={{ height: '300px' }} />
          </Card>
        </Col>
      </Row>

      <div className="employment-highlights">
        <Title level={3}>就业亮点</Title>
        <Row gutter={[16, 16]}>
          <Col xs={24} sm={12} md={8}>
            <Card className="highlight-card">
              <Title level={4}>95%</Title>
              <Paragraph>毕业生在秋/春招成功就业</Paragraph>
            </Card>
          </Col>
          <Col xs={24} sm={12} md={8}>
            <Card className="highlight-card">
              <Title level={4}>20K+</Title>
              <Paragraph>应届毕业生平均月薪</Paragraph>
            </Card>
          </Col>
          <Col xs={24} sm={12} md={8}>
            <Card className="highlight-card">
              <Title level={4}>80%</Title>
              <Paragraph>毕业生进入互联网头部企业</Paragraph>
            </Card>
          </Col>
        </Row>
      </div>
    </div>
  );
};

export default EmploymentPage;